<template>
  <div id="es">
    <div :id="'main' + imgUrl" style="width: 100%; height:100%"></div>
  </div>
</template>
<script>
import * as echarts from 'echarts'
export default {
  name: 'Es',
  data() {
    return {
      option: {

        title: {
          text: ` {a|     ${this.title}价格}`,
          show: true,

          textStyle: {
            fontFamily: '幼圆',
            lineHeight: 20,
            rich: {
              a: {
                color: '#333333',
                fontSize: '18',
                height: 20,
                width: 20,
                backgroundColor: {
                  image: require(`@/assets/img/${this.imgUrl}.png`)
                }
              }
            }
          }
        },
        grid: {
          x: 50,
          y: 60,
          x2: 20,
          y2: 50
        },
        tooltip: {},
        xAxis: {
          type: 'category',
          data: [],
          triggerEvent: true,
          axisLabel: {
            interval: 'auto',
            rotate: 0
          }
        },
        yAxis: {
          name: '元/吨'
        },
        lineStyle: {
          color: `rgba(${this.color}, 1)`
        },

        series: [
          {
            name: '玉米价格',
            type: 'line',
            data: [5, 20, 36],
            smooth: true,
            itemStyle: {
              normal: {
                color: `rgba(${this.color}, 1)`,
                borderColor: `rgba(${this.color}, 1)` // 拐点边框颜色
              }
            },
            areaStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 0,
                  color: `rgba(${this.color}, 1)`
                },
                {
                  offset: 1,
                  color: `rgba(${this.color}, 0)`
                }
              ])
            }
          }
        ]
      }
    }
  },
  props: {
    datas: {
      type: Array
    },
    color: {
      type: String
    },
    imgUrl: {
      type: String
    },
    title: {
      type: String
    }
  },
  mounted() {
    this.drawChart()
  },
  methods: {
    drawChart() {
      // 基于准备好的dom，初始化echarts实例
      const myChart = echarts.init(
        document.getElementById('main' + this.imgUrl)
      )
      // 指定图表的配置项和数据
      // 使用刚指定的配置项和数据显示图表。
      const xData = [] // 横坐标
      const yData = [] // 纵坐标

      this.datas.forEach((ele) => {
        const time = ele.yyyy + '-' + ele.mm + '-' + ele.dd
        xData.push(time)
        yData.push(ele.price)
      })
      this.option.xAxis.data = xData.reverse()
      this.option.series[0].data = yData.reverse()
      myChart.setOption(this.option)
    }
  }
}
</script>
<style lang="scss" scoped>
#es {
  width: 100%;
  height: 100%;
  position: relative;
  z-index: 1;
}
.my-chart {
  width: 100%;
  height: 100%;
}
</style>
